import React from 'react';
import { Tab, Tag } from '@teamix/ui';
import jsonFormat from 'json-format';
import ListEmpty from 'atComponents/ListEmpty';
import intl from '../../../../../../../../../../locale';

const prefix = 'prehook-history-dialog';
export default class Detail extends React.Component {
  state = {
    activeTab: 'request',
  };

  onTabChange = (value) => {
    this.setState({
      activeTab: value,
    });
  };

  getStrEle = (str) => {
    const arr = str.split('\n');
    const curStr = arr.map((item) => {
      return <div>{item}</div>;
    });
    return curStr;
  };

  renderBody = (body) => {
    let bodyDetail = null;
    if (body) {
      let curBody;
      try {
        const bodyObj = JSON.parse(body);
        curBody = jsonFormat(bodyObj, {
          type: 'space',
          size: 2,
        });
      } catch (err) {
        curBody = body;
      }
      const curBodyEles = this.getStrEle(curBody);
      bodyDetail = <pre className="light-well detail">{curBodyEles}</pre>;
    }
    return (
      <div className="response">
        <div className="title">Body</div>
        {bodyDetail}
      </div>
    );
  };

  render() {
    const { activeTab } = this.state;
    const { record } = this.props;

    return (
      <div className={`${prefix}-tab`}>
        <Tab onChange={this.onTabChange} activeKey={activeTab} animation={false}>
          <Tab.Item title={<span>Request</span>} key={'request'} />
          <Tab.Item
            title={
              <div className={`${prefix}-tab-title`}>
                <span>Response</span>
                {record.response_code ? (
                  <Tag
                    color={
                      record.response_code < 300 && record.response_code >= 200 ? 'green' : 'red'
                    }
                    style={{ margin: '0 4px' }}
                  >
                    {record.response_code}
                  </Tag>
                ) : (
                  <Tag style={{ margin: '0 4px' }}>
                    {intl.get({
                      id: 'code-assets.containers.historyModal.detail.NoResponse',
                      defaultMessage: '未响应',
                    })}
                  </Tag>
                )}
              </div>
            }
            key={'response'}
          />
        </Tab>

        {activeTab === 'request' ? (
          <div>{this.renderBody(record.request_body)}</div>
        ) : (
          <div>
            {record.check_result && record.check_result.check_message && (
              <div className="response">
                <div className="title">
                  {intl.get({
                    id: 'code-assets.containers.historyModal.detail.VerificationResult',
                    defaultMessage: '验证结果',
                  })}
                </div>
                <div className="desc">{record.check_result.check_message}</div>
              </div>
            )}

            {record.response_body ? (
              <div>{this.renderBody(record.response_body)}</div>
            ) : (
              <div className="empty-response">
                <ListEmpty
                  content={intl.get({
                    id: 'code-assets.containers.historyModal.detail.NoResponseReceived',
                    defaultMessage: '未收到响应',
                  })}
                  image="none"
                  className="table-list-empty"
                />
              </div>
            )}
          </div>
        )}
      </div>
    );
  }
}
